<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<style type="text/css">
			body{
				background: #FFFFFF;
			}
			.mui-bar{
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
			}
			a , .mui-title{
				color:rgba(255,255,255,1);
			}
			#dis_img{
				width: 22px;
				height: 22px;
				position: relative;
				float: right;
				margin-top: 11px;
			}
			.dis_grade{
				width: 100%;
				position: relative;
				float: left;
				border-bottom: 1px solid #d4d4d4;
				
			}
			.grade_one{
				width: 33%;
				position: relative;
				float: left;
				text-align: center;
				padding-top: 16px;
				padding-bottom: 16px;
				box-sizing: border-box;
			}
			.grade_activity{
				border-bottom: 2px solid #FF5A5A;	
			}
			.grade_one>span{
				font-size:13px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
			.grade_activity>span{
				color: #FF5A5A;
			}
			
			.dis_details{
				width: 100%;
				position: relative;
				float: left;
				
			}
			.subor_two{
				width:100%;
				position:relative;
				float: left;
				border-bottom:1px solid #d4d4d4;
				padding-top:20px;
				padding-left: 15px;
				box-sizing:border-box;
				padding-bottom:20px;
			}
			.two_o{
				width:15%;
				position:relative;
				float:left;
			}
			.two_o>img{
				width:50px;
				height:50px;
				border-radius:50%;
			}
			.two_t{
				width:55%;
				position: relative;
				float: left;
				padding-top: 5px;
				box-sizing:border-box;
			}
			.two_t>span{
				font-size:12px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
			.two_t>p{
				font-size:11px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(153,153,153,1);
			}
			.two_th{
				width:30%;
				position: relative;
				float: left;
				margin-top: 7px;
				box-sizing:border-box;
			}
			.two_th>span{
				font-size:13px;
				font-family:PingFang-SC-Bold;
				font-weight:bold;
				color:rgba(255,90,90,1);
			}
		</style>
	</head>
			
	<body>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">三级分销</h1>
				<img src="../image/wenhao.png" id="dis_img" >
			</header>
			<div class="mui-content">
				<div class="dis_grade">
					<div id='yijititle' index="0" class="grade_one grade_activity" >
						<span>一级</span>
						<span>(2)</span>
					</div>
					<div id='erjititle' index="1" class="grade_one">
						<span>二级</span>
						<span>(0)</span>
					</div>
					<div id='sanjititle' index="2" class="grade_one">
						<span>三级</span>
						<span>(0)</span>
					</div>
				</div>
				
				<div id="yijis" class="dis_details">
					<!-- <div class="subor_two details_active">
						<div class="two_o">
							<img src="../image/touxiang.png" alt="">
						</div>
						<div class="two_t">
							<span>小小英1</span>
							<p>已消费￥3123.40</p>
						</div>
						<div class="two_th">
							<span>已赚佣金¥12.13</span>
						</div>
					</div> -->
					<!-- <div class="subor_two">
						<div class="two_o">
							<img src="../image/touxiang.png" alt="">
						</div>
						<div class="two_t">
							<span>小小英1</span>
							<p>已消费￥3123.40</p>
						</div>
						<div class="two_th">
							<span>已赚佣金¥12.13</span>
						</div>
					</div> -->
				</div>
				<div id="erjis" class="dis_detailsA" style="display: none;">
					<!-- <div class="subor_two ">
						<div class="two_o">
							<img src="../image/touxiang.png" alt="">
						</div>
						<div class="two_t">
							<span>小小英2</span>
							<p>已消费￥3123.40</p>
						</div>
						<div class="two_th">
							<span>已赚佣金¥12.13</span>
						</div>
					</div> -->
					<!-- <div class="subor_two">
						<div class="two_o">
							<img src="../image/touxiang.png" alt="">
						</div>
						<div class="two_t">
							<span>小小英2</span>
							<p>已消费￥3123.40</p>
						</div>
						<div class="two_th">
							<span>已赚佣金¥12.13</span>
						</div>
					</div> -->
				</div>
				<div id="sanjis" class="dis_detailsB" style="display: none;">
					<!-- <div class="subor_two">
						<div class="two_o">
							<img src="../image/touxiang.png" alt="">
						</div>
						<div class="two_t">
							<span>小小英3</span>
							<p>已消费￥3123.40</p>
						</div>
						<div class="two_th">
							<span>已赚佣金¥12.13</span>
						</div>
					</div> -->
					<!-- <div class="subor_two">
						<div class="two_o">
							<img src="../image/touxiang.png" alt="">
						</div>
						<div class="two_t">
							<span>小小英3</span>
							<p>已消费￥3123.40</p>
						</div>
						<div class="two_th">
							<span>已赚佣金¥12.13</span>
						</div>
					</div> -->
				</div>
			</div>
		<script src="../js/mui.js"></script>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			mui.plusReady(function(){
				var url = plus.storage.getItem('url');
				var user = plus.storage.getItem('user');
				user = JSON.parse(user);
				var jishu = '0';
				var yijipage = 1;
				var erjipage = 1;
				var sanjipage = 1;
				
				
				
				
				
				
				mui.init({
				  pullRefresh : {
				    container:'.mui-content',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
				    up : {
				      height:50,//可选.默认50.触发上拉加载拖动距离
				      auto:true,//可选,默认false.自动上拉加载一次
				      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
				      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
				      callback :function(){
						  // mui.alert('haha')
						  getData(function(){
							   mui('.mui-content').pullRefresh().endPullupToRefresh();
						  })
						 
					  }//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				    }
				  }
				});
				
				function getData(func){
					// plus.nativeUI.showWaiting();
					var page = 1;
					if(jishu==1){
						page = yijipage;
					}else if(jishu==2){
						page = erjipage;
					}else if(jishu==3){
						page = sanjipage;
					}
					if(page==0){
						mui.toast('没有更多数据了！');
						if(func){
							func()
						}
						return;
					}
					// mui.alert(jishu)
					mui.post(url+'/juyou/myfenxiao/getmychild',{jishu:jishu,page:page,token:user.token},function(res){
						// mui.alert(res.msg);
						if(jishu=='0'){
							//设置各级总条数
							$("#yijititle").children('span').eq(1).text(res.data.yiji.total);
							$("#erjititle").children('span').eq(1).text(res.data.erji.total);
							$("#sanjititle").children('span').eq(1).text(res.data.sanji.total);
							var str = '';
							if(res.data.yiji.data.length<10){
								yijipage = 0;
							}else{
								yijipage = 2;
							}
							if(res.data.erji.data.length<10){
								erjipage = 0;
							}else{
								erjipage = 2;
							}
							if(res.data.sanji.data.length<10){
								sanjipage = 0;
							}else{
								sanjipage = 2;
							}
							//添加一级
							mui.each(res.data.yiji.data,function(i,v){
								if(i==0){
									str+='<div class="subor_two details_active">'+
										'<div class="two_o">'+
											'<img src="'+v.touxiang+'" alt="">'+
										'</div>'+
										'<div class="two_t">'+
											'<span>'+v.name+'</span>'+
											'<p>已消费金币:'+v.xiaofei+'</p>'+
										'</div>'+
										'<div class="two_th">'+
											'<span>已赚佣金:'+v.huoqu+'</span>'+
										'</div>'+
									'</div>';
								}else{
									str+='<div class="subor_two">'+
										'<div class="two_o">'+
											'<img src="'+v.touxiang+'" alt="">'+
										'</div>'+
										'<div class="two_t">'+
											'<span>'+v.name+'</span>'+
											'<p>已消费金币:'+v.xiaofei+'</p>'+
										'</div>'+
										'<div class="two_th">'+
											'<span>已赚佣金:'+v.huoqu+'</span>'+
										'</div>'+
									'</div>';
								}
							})
							$("#yijis").append(str);
							
							//添加二级
							str = '';
							mui.each(res.data.erji.data,function(i,v){
								if(i==0){
									str+='<div class="subor_two details_active">'+
										'<div class="two_o">'+
											'<img src="'+v.touxiang+'" alt="">'+
										'</div>'+
										'<div class="two_t">'+
											'<span>'+v.name+'</span>'+
											'<p>已消费金币:'+v.xiaofei+'</p>'+
										'</div>'+
										'<div class="two_th">'+
											'<span>已赚佣金:'+v.huoqu+'</span>'+
										'</div>'+
									'</div>';
								}else{
									str+='<div class="subor_two">'+
										'<div class="two_o">'+
											'<img src="'+v.touxiang+'" alt="">'+
										'</div>'+
										'<div class="two_t">'+
											'<span>'+v.name+'</span>'+
											'<p>已消费金币:'+v.xiaofei+'</p>'+
										'</div>'+
										'<div class="two_th">'+
											'<span>已赚佣金:'+v.huoqu+'</span>'+
										'</div>'+
									'</div>';
								}
							})
							$("#erjis").append(str);
							//添加三级
							str = '';
							mui.each(res.data.sanji.data,function(i,v){
								if(i==0){
									str+='<div class="subor_two details_active">'+
										'<div class="two_o">'+
											'<img src="'+v.touxiang+'" alt="">'+
										'</div>'+
										'<div class="two_t">'+
											'<span>'+v.name+'</span>'+
											'<p>已消费金币:'+v.xiaofei+'</p>'+
										'</div>'+
										'<div class="two_th">'+
											'<span>已赚佣金:'+v.huoqu+'</span>'+
										'</div>'+
									'</div>';
								}else{
									str+='<div class="subor_two">'+
										'<div class="two_o">'+
											'<img src="'+v.touxiang+'" alt="">'+
										'</div>'+
										'<div class="two_t">'+
											'<span>'+v.name+'</span>'+
											'<p>已消费金币:'+v.xiaofei+'</p>'+
										'</div>'+
										'<div class="two_th">'+
											'<span>已赚佣金:'+v.huoqu+'</span>'+
										'</div>'+
									'</div>';
								}
							})
							$("#sanjis").append(str);
							jishu = 1;
							
						}else if(jishu==1){
							var str = '';
							if(res.data.data.length<10){
								yijipage = 0;
							}else{
								yijipage = yijipage+1;
							}
							mui.each(res.data.data,function(i,v){
								str+='<div class="subor_two">'+
									'<div class="two_o">'+
										'<img src="'+v.touxiang+'" alt="">'+
									'</div>'+
									'<div class="two_t">'+
										'<span>'+v.name+'</span>'+
										'<p>已消费金币:'+v.xiaofei+'</p>'+
									'</div>'+
									'<div class="two_th">'+
										'<span>已赚佣金:'+v.huoqu+'</span>'+
									'</div>'+
								'</div>';
							})
							$("#yijis").append(str)
						}else if(jishu==2){
							var str = '';
							if(res.data.data.length<10){
								erjipage = 0;
							}else{
								erjipage = erjipage+1;
							}
							mui.each(res.data.data,function(i,v){
								str+='<div class="subor_two">'+
									'<div class="two_o">'+
										'<img src="'+v.touxiang+'" alt="">'+
									'</div>'+
									'<div class="two_t">'+
										'<span>'+v.name+'</span>'+
										'<p>已消费金币:'+v.xiaofei+'</p>'+
									'</div>'+
									'<div class="two_th">'+
										'<span>已赚佣金:'+v.huoqu+'</span>'+
									'</div>'+
								'</div>';
							})
							$("#erjis").append(str)
						}else if(jishu==3){
							var str = '';
							if(res.data.data.length<10){
								sanjipage = 0;
							}else{
								sanjipage = sanjipage+1;
							}
							mui.each(res.data.data,function(i,v){
								str+='<div class="subor_two">'+
									'<div class="two_o">'+
										'<img src="'+v.touxiang+'" alt="">'+
									'</div>'+
									'<div class="two_t">'+
										'<span>'+v.name+'</span>'+
										'<p>已消费金币:'+v.xiaofei+'</p>'+
									'</div>'+
									'<div class="two_th">'+
										'<span>已赚佣金:'+v.huoqu+'</span>'+
									'</div>'+
								'</div>';
							})
							$("#sanjis").append(str)
						}
						if(func){
							func();
						}
					})
					
				}
				
				//tab
				mui(".dis_grade").on("tap",".grade_one",function(){
					$(this).addClass("grade_activity");
					$(this).siblings().removeClass("grade_activity")
					var  value=$(this).attr("index");
					if(value==0){
						jishu = 1;
						$(".dis_details").css("display","block");
						$(".dis_detailsA").css("display","none");
						$(".dis_detailsB").css("display","none");
					}else if(value==1){
						jishu = 2;
						$(".dis_details").css("display","none");
						$(".dis_detailsA").css("display","block");
						$(".dis_detailsB").css("display","none");
					}else if(value==2){
						jishu = 3;
						$(".dis_details").css("display","none");
						$(".dis_detailsA").css("display","none");
						$(".dis_detailsB").css("display","block");
					}
				})
				
				
				//点击问号图片
				document.getElementById("dis_img").addEventListener("tap",function(){
					mui.openWindow({
						url:"rule.html",
						id:"rule.html",
					})
				})
			})
			
		</script>
	</body>

</html>
